<template>
  <div>
    <n-card style="margin-top: 5px;" :bordered="false">
      <n-grid x-gap="12">
        <n-grid-item :span="24">
          <n-form-item :show-label="false" label="是否使用Dynamic Thresholding (CFG Scale Fix)">
            <n-space justify="space-around">
              <n-checkbox
                  v-model:checked="props.dynamicThresholdingConfig.isEnable"
              >Dynamic Thresholding (CFG Scale Fix)
              </n-checkbox>
            </n-space>
          </n-form-item>
        </n-grid-item>
        <n-grid-item :span="24">
          <n-card title="Dynamic Thresholding(CFG Scale FIX)" v-if="props.dynamicThresholdingConfig.isEnable">
            <n-row>
              <n-form-item label="Mimic CFG Scale">
                <n-input-number :min="1" :max="30" style="width: 600px" :step="0.5"
                                v-model:value="props.dynamicThresholdingConfig.mimicCfgScale"></n-input-number>
              </n-form-item>
            </n-row>
            <n-row>
              <n-form-item label="Top percentile of latents to clamp">
                <n-input-number :min="90" :max="100" :step="0.05" style="width: 300px"
                                v-model:value="props.dynamicThresholdingConfig.thresholdPercentile"></n-input-number>
              </n-form-item>
              <n-form-item label="Interpolate Phi" style="margin-left: 10px;">
                <n-input-number :min="0" :max="1" :step="0.01" style="width: 300px"
                                v-model:value="props.dynamicThresholdingConfig.interpolatePhi"></n-input-number>
              </n-form-item>

            </n-row>


            <n-row>
              <n-form-item label="Mimic Scale Scheduler">
                <n-select :options="schedulerOptions" style="width: 300px"
                          v-model:value="props.dynamicThresholdingConfig.mimicMode"></n-select>
              </n-form-item>
              <n-form-item label="CFG Scale Scheduler" style="margin-left: 10px;">
                <n-select :options="schedulerOptions" style="width: 300px"
                          v-model:value="props.dynamicThresholdingConfig.cfgMode"></n-select>
              </n-form-item>
            </n-row>

            <n-row>
              <n-form-item label="Minimum value of the Mimic Scale Scheduler">
                <n-input-number :min="0" :max="30" :step="0.5" style="width: 300px"
                                v-model:value="props.dynamicThresholdingConfig.mimicScaleMiniNUm"></n-input-number>
              </n-form-item>
              <n-form-item label="Minimum value of the CFG Scale Scheduler" style="margin-left: 10px;">
                <n-input-number :min="0" :max="30" :step="0.5" style="width: 300px"
                                v-model:value="props.dynamicThresholdingConfig.cfgScaleMinium"></n-input-number>
              </n-form-item>
            </n-row>

            <n-row>
              <n-form-item label="Scheduler Value">
                <!--                <n-alert>Value unique to the scheduler mode - for Power Up/Down, this is the power. For Linear/Cosine Repeating, this is the number of repeats per image.</n-alert>-->
                <n-input-number :min="0" :max="40" :step="0.5" style="width: 600px"
                                v-model:value="props.dynamicThresholdingConfig.powerValue"></n-input-number>

              </n-form-item>
            </n-row>
            <n-row>
              <n-form-item label="Separate Feature Channels">
                <n-checkbox v-model:checked="props.dynamicThresholdingConfig.separateFeatureChannles"> Separate Feature Channels
                </n-checkbox>
              </n-form-item>

              <n-form-item label="Scaling Startpoint" style="margin-left: 10px;">
                <n-radio-group v-model:value="props.dynamicThresholdingConfig.scalingStartPoint">
                  <n-radio value="ZERO">ZERO</n-radio>
                  <n-radio value="MEAN">MEAN</n-radio>
                </n-radio-group>
              </n-form-item>
              <n-form-item label="Variability Measure" style="margin-left: 15px;">
                <n-radio-group v-model:value="props.dynamicThresholdingConfig.variabilityMeasure">
                  <n-radio value="STD">STD</n-radio>
                  <n-radio value="AD">AD</n-radio>
                </n-radio-group>
              </n-form-item>
            </n-row>

          </n-card>
        </n-grid-item>

      </n-grid>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
// @ts-ignore
import fileFunction from "@/libs/globalFunction/file"

const schedulerOptions = ref([{
  label: 'Constant',
  value: 'Constant'
}, {
  label: 'Linear Down',
  value: 'Linear Down'
}, {
  label: 'Cosine Down',
  value: 'Cosine Down'
}, {
  label: 'Half Cosine Down',
  value: 'Half Cosine Down'
}, {
  label: 'Linear Up',
  value: 'Linear Up'
}, {
  label: 'Cosine Up',
  value: 'Cosine Up'
}, {
  label: 'Half Cosine Up',
  value: 'Half Cosine Up'
}, {
  label: 'Power Up',
  value: 'Power Up'
}, {
  label: 'Power Down',
  value: 'Power Down'
}, {
  label: 'Half Cosine Down',
  value: 'Half Cosine Down'
}, {
  label: 'Linear Repeating',
  value: 'Linear Repeating'
}, {
  label: 'Cosine Repeating',
  value: 'Cosine Repeating'
}, {
  label: 'Sawtooth',
  value: 'Sawtooth'
}])



const props = defineProps({
  dynamicThresholdingConfig: {
    type: Object,
    required: true,
    default: () => {
      return {}
    }
  }
})


const loadConfig = (dynamicThresholdingConfig : string) =>{

}

</script>
